<template>
  <router-link :to="path" class="wrapper">
    <i class="icon">{{iconTex}}</i>
    <p class="text">
      <slot></slot>
    </p>
  </router-link>
</template>

<script>
export default {
  props: {
    iconTex: String,
    path: String
  }
}
</script>

<style lang="less" scoped>
.wrapper{
  font-size: .12rem;
  .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: .25rem;
    height: .25rem;
    background: #ddd;
    color: #999;
    border-radius: 50%;
    transition: all 0.5s;
  }
  .text{
    text-align: center;
    margin-top: 0.02rem;
    color: #999;
    transition: all 0.5s;
  }
  &.router-link-active{
    .icon{
      background: #ed4040;
      color: #fff;
    }
    .text{
      color: #ed4040;
    }
  }
}
</style>